<template>
    <el-dialog :close-on-click-modal="false" :visible="addFlag" class="zdy-dialog" width="650px"
               :title="$t('Add')" :lock-scroll="false" :before-close="handleCloseDialog">
        <el-form :model="form" class="pop-form-box" :rules="rules" ref="ruleForm">
            <el-row :gutter="20">
                <el-col :span="12">
                    <!--设备名称-->
                    <el-form-item :label="$t('Device name')" prop="deviceName" :title="form.deviceName">
                        <el-input v-model="form.deviceName" minlength="1" maxlength="30"
                                  show-word-limit></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--设备类型-->
                    <el-form-item :label="$t('Device type')" prop="deviceType" :rules="$rules.req">
                        <!--请选择-->
                        <el-select v-model="form.deviceType" :placeholder="$t('Please select')">
                            <el-option
                                    v-for="item in devOptions"
                                    :key="item.value"
                                    :label="$t(item.label)"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--序列号-->
                    <el-form-item label="IPv4" prop="ip">
                        <el-input v-model="form.ip"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="footBtnBox">
                <!--取消-->
                <el-button size="small" type="handle" @click="handleCloseDialog">{{this.i18n.t('Cancel')}}</el-button>
                <!--保存-->
                <el-button size="small" type="primary" :loading="saveLoading" :disabled="saveDisabled" @click="submitForm">{{this.i18n.t('save')}}</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script>
    import {deviceTypeList} from '@/assets/common/js/utils/deviceConfig.js'
    import {sbglManualCreate} from "@/api/sbgl";
    export default {
        name: "addDevice",
        props: {
            addFlag: {
                type: Boolean,
                default: false
            }
        },
        data(){
            var validateDeviceName = (rule, value, callback) => {
                if (value === '') {
                    // 请输入设备名称
                    callback(new Error(this.i18n.t('Please enter the device name')));
                } else if (value.length<1 ||value.length>30) {
                    // 长度1~30位!
                    callback(new Error(this.i18n.t('Length 1~30 characters!')));
                } else {
                    callback();
                }
            };
            var validateMi = (rule, value, callback) => {
                if (value == ''||value==null) {
                    // 不能为空
                    callback(new Error(this.i18n.t('Cannot be empty')));
                } else if (!this.$rules.ip.test(value)) {
                    // 格式不正确
                    callback(new Error(this.i18n.t('Incorrect format')));
                } else {
                    callback();
                }
            };
            return{
                saveLoading: false,
                value: 0,
                saveDisabled:false,
                form:{
                    deviceType:0,
                    deviceName:"",
                    ip:""
                },
                devOptions:[],
                rules: {
                    ip:[
                        { validator: validateMi,required: true, trigger: 'blur' }
                    ],
                    deviceName: [
                        { validator: validateDeviceName,required: true, trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            handleCloseDialog(){
                this.$emit('update:addFlag', false);
            },
            // 刷新列表
            parentUpdate(){
                this.$emit("update:addFlag",false);
                this.$parent.$refs.globalTable.loading_data();
            },
            // 手动添加
            sbglManualCreate(params){
                this.saveLoading=true
                sbglManualCreate(params).then((res) => {
                    if (res.code === 200) {
                        // 添加成功
                        this.W.$tips("success", this.i18n.t('Add successfully!'));
                        this.parentUpdate();
                    }
                }).catch().finally(() => {
                    this.saveLoading=false
                })
            },
            // 保存方法
            submitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.sbglManualCreate(this.form)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        mounted(){
            this.devOptions=deviceTypeList.slice(0,3)
        }
    }
</script>

<style scoped>

</style>